<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 320px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    
    h3 {
      color: #333;
      margin-top: 0;
      text-align: center;
    }
    
    .setting-group {
      margin-bottom: 15px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    
    input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    button {
      width: 100%;
      padding: 10px;
      background-color: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 10px;
    }
    
    button:hover {
      background-color: #3367d6;
    }
    
    .instructions {
      background-color: #f8f9fa;
      border-left: 4px solid #4285f4;
      padding: 10px;
      margin-top: 20px;
      font-size: 12px;
    }
    
    .status {
      text-align: center;
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      font-weight: bold;
    }
    
    .success {
      background-color: #dff0d8;
      color: #3c763d;
    }
    
    .error {
      background-color: #f2dede;
      color: #a94442;
    }
    
    .help-link {
      text-align: center;
      margin-top: 15px;
      font-size: 12px;
    }
    
    .help-link a {
      color: #4285f4;
      text-decoration: none;
    }
    
    .help-link a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h3>双屏巨量百应搜索助手</h3>
  
  <div class="setting-group">
    <label for="secondaryScreenLeft">副屏左侧位置 (px)</label>
    <input type="number" id="secondaryScreenLeft" placeholder="例如: 1920">
  </div>
  
  <div class="setting-group">
    <label for="secondaryScreenTop">副屏顶部位置 (px)</label>
    <input type="number" id="secondaryScreenTop" placeholder="例如: 0">
  </div>
  
  <button id="saveSettings">保存设置</button>
  
  <div id="statusMessage"></div>
  
  <div class="instructions">
    <p><strong>使用说明：</strong></p>
    <p>1. 在网页中选中文本</p>
    <p>2. 右键选择"在副屏巨量百应搜索"</p>
    <p>3. 搜索结果将在副屏打开</p>
    <p><em>首次使用请先设置副屏位置</em></p>
  </div>
  
  <div class="help-link">
    <a href="DEBUGGING.md" target="_blank">问题排查指南</a>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>